<%--
  Created by IntelliJ IDEA.
  User: 唐东
  Date: 2021/1/13
  Time: 11:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <style>
        .error{
            color:red;}
        *{
            margin:0px;
            padding:0px;
            box-sizing:border-box;
        }
        body{
            padding:30px;
        }
        .BigBox	{
            width:800px;
            height:250px;
            border:8px solid #EEEEEE;
            background-color:white;
            margin:auto;
        }
        .center-layout{
            margin:15px;
            float:left;
        }
        .center-layout table{
            border-collapse:separate;
            border-spacing:2px;
            border-color:gray;
        }
        .td-left{
            width:100px;
            text-align:right;
            height:45px;
        }
        .td-right{
            padding-left:50px;
        }
        #userName,#password{
            width:250px;
            height:32px;
            border:1px solid #a6a6a6;
            border-radius:5px;
            padding-left:10px;
        }
        #btn-submit{
            width:130px;
            height:40px;
            background-color:#ffd026;
            border:1px solid #ffd026;
        }
        a:link{
            color:pink;
        }
        a:hover{
            color:green;
        }
        a:active{
            color:yellow;
        }
        a:visited{
            color:red;
        }
        .right-layout div{
            float:left;
        }
        .right-layout{
            margin:15px;
            float:right;
        }
        .right-layout div{
            float:left;
        }
    </style>
    <script>
        window.onload=function(){
            document.getElementById("form").onsubmit=function(){
                return checkUserName()&&checkPassword();
            }
            document.getElementById("userName").onblur=checkUserName;
            document.getElementById("password").onblur=checkPassword;
        }
        function checkUserName(){
            var userName=document.getElementById("userName").value;
            var reg=/(?!^\\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]/;
            var flag=reg.test(userName);
            var s_userName=document.getElementById("s_userName");
            if(!flag)
            {
                s_userName.innerHTML="用户名格式有误！";
            }
        }
        function checkPassword(){
            var password=document.getElementById("password").value;
            var reg=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
            var flag=reg.test(password);
            var s_userName=document.getElementById("s_password");
            if(!flag)
            {
                s_password.innerHTML="密码格式有误！";
            }
        }
    </script>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        function changeImg() {
            //需要让每次请求的url都发生变化。否则服务器会认为访问的时一张图片，就不会刷新请求了
            $("#vericodeImg").attr("src","imageCodeServlet?"+Math.random())
        }
    </script>
</head>
<body>
<div class="BigBox">
    <div class="center-layout">
        <form action="/loginServlet" method="post" id="form">
        <table>
            <tbody>
            <tr>
                <td class="td-left">
                    <label for="userName">用户名：</label>
                </td>
                <td class="td-right">
                    <input type="text" name="userName" id="userName" placeholder="请输入用户名">
                    <span id="s_userName" class="error"></span>
                </td>
            </tr>
            <tr>
                <td class="td-left">
                    <label for="password">密码：</label>
                </td>
                <td class="td-right">
                    <input type="password" name="password" id="password" placeholder="请输入密码">
                    <span id="s_password" class="error"></span>
                </td>
            </tr>
            <tr>
                <td class="td-left">
                    <label>验证码：</label>
                </td>
                <td class="td-right">
                    <input name="vericode" placeholder="验证码" value="" style="width: 100px" autocomplete="off">
                    <img id="vericodeImg" src="imageCodeServlet">
                    <a href="javascript:;" onclick="changeImg()">刷新</a>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="登录" id="btn-submit"/>
                    <input type="checkbox" name="autologin" value="true"/>30天内自动登陆
                </td>
            </tr>
            </tbody>
        </table>
        </form>
    </div>
    <div class="right-layout">
        <div>新用户？</div>
        <div><a href="/regist.jsp">前往注册</a></div>
    </div>
</div>
</body>
</html>
